<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 375px;
        height: 667px;
        background-color: red;
    }
</style>

<body>
    <!-- 
        移动端开发都是以iPhone6为标准进行开发的
        iPhone6的分辨率是750*1334
        电脑、手机、电视屏幕上的像素点是真实存在的
        分辨率的像素点不能变


        css像素是一个抽象单位，主要是开发人员用在浏览器上的一个度量单位 web页面上 
        随着我们的放大 缩小，100px*100px在页面上所占的面积不一样
        放大 100px*100px盒子所占的真实的物理像素点 变多
        缩小100*100px盒子所占的真实的物理像素点 变少


        iphone分辨率 750*1334

               css   375 * 667 

       dpr像素比（devicePixelRatio）：官方定义：设备物理像素和设备独立像素的比例   
       设备物理像素 / 设备独立像素  单方向的比
       750/375  1334/ 667  2
       
       加上这段代码
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        用document.document.clientWidth获取屏幕宽度 375

        不加这段代码
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         用document.document.clientWidth获取屏幕宽度 980


         移动端视口有三个
         1.布局视口 
         手机上为了容纳桌面浏览器网站的设计，默认的布局视口远大于屏幕布局视口，值980
         2.视觉视口
        视觉视口和设备屏幕一样宽 375
        3.理想视口
        视觉视口和布局视口一样 375

        width 布局视口的宽  980
        device-width 设备独立像素的值  375


        视网膜屏幕 高清屏
        dpr >1   1:1
        dpr  >2  2:1 
        dpr >3   

        适配
        rem vw wh
        建议使用rem,rem是页面跟标签字体的大小
        html font-size
        document.documentElement.clientwidth / 10   html font-size 不一样  1rem
        每个手机分的份数一样  10

        rem
        1rem   
        1rem


        移动端排版
        不同大小的手机的效果相同

        ui给的原型图  750px

        375/10   37.5 html font-size   1rem  37.5px
        750/10   75px  html font-size  1rem  75px

        10等份
        10rem
        
        375/37.5 = 10 = 750 / 75

        假如：ui 750   上面有个盒子图片 710px  *  386px  
        rem
        750图纸  1rem  75px  710 / 75 = ?rem

        ? / 75 * 1rem



        rem  html font-size 
        document.documentElement.clientWidth / 10 
        375 / 10    37.5px  1rem 37.5px
        750 / 10    75px    1rem  75px 
         

        ui原型图 750     710px  * 386px    rem   （710 / 75）* 1rem * （386 / 75）* 1rem
        ？ / 75 * 1rem  求出来的rem的值
        
        

        写css排版可以一个个算 太麻烦不建议使用
        预编译可以进行运算
        less  写混合
        sass  可以写混合可以写函数




     -->
    <div class="box"></div>
    <script>
        (
            function () {
                // 屏幕的宽度
                var width = document.documentElement.clientWidth;//375
                // 创建style标签
                var styleNode = document.createElement("style");
                // 把屏幕分为十份 
                styleNode.innerHTML = 'html{font-size:' + width / 10 + 'px !important;}';
                // 把style标签加入到head中
                document.head.appendChild(styleNode);

            }
        )()
    </script>
</body>

</html>